{extend name="/index/base" /}

{block name="content"}
<style>
    .laytable-cell-1-title {
        width: 243px !important;
    }
</style>
<div class="layui-card">

    <div class="layui-card-body">
        <table id="dataTable" lay-filter="dataTable"></table>
        <script type="text/html" id="options">
            <div class="layui-btn-group">
                <a class="layui-btn layui-btn-danger layui-btn-sm" lay-event="login">{{ d.is_login == 1 ? '取消登录控制' : '加入登录控制' }}</a>
                <a class="layui-btn layui-btn-danger layui-btn-sm" lay-event="auth">{{ d.is_auth == 1 ? '取消权限控制' : '加入权限控制' }}</a>
            </div>
        </script>
        <script type="text/html" id="titles">
            <input class='layui-input layui-input-inline title-input' name='title' data-node="{{d.node}}"
                   value="{{d.title??''}}" />
        </script>
        <script type="text/html" id="tags">
            @{{#  layui.each(d.tags, function(index, item){ }}
            <button type="button" class="layui-btn layui-btn-sm">@{{ item.name }}</button>
            @{{# }); }}
        </script>
        <script type="text/html" id="category">
            @{{ d.category.name }}
        </script>
    </div>
</div>

{/block}


{block name="script"}
<script>
    layui.use(['layer','table','form'],function () {
        var layer = layui.layer;
        var form = layui.form;
        var table = layui.table;
        var $ = layui.$ //由于layer弹层依赖jQuery，所以可以直接得到
        //用户表格初始化
        var dataTable = table.render({
            elem: '#dataTable'
            ,height: 500
            ,url: "{:URL('admin/node/data')}" //数据接口
            ,page: true //开启分页
            ,cols: [[ //表头
                {checkbox: true,fixed: true}
                ,{field: 'title', title: '标题', toolbar: '#titles'}
                ,{field: 'node', title: 'node'}
                ,{fixed: 'right', width: 220, align:'center', toolbar: '#options'}
            ]]
        });

        //监听工具条
        table.on('tool(dataTable)', function(obj){ //注：tool是工具条事件名，dataTable是table原始容器的属性 lay-filter="对应的值"
            var data = obj.data //获得当前行数据
                ,layEvent = obj.event; //获得 lay-event 对应的值
            if(layEvent === 'del'){
                layer.confirm('确认删除吗？', function(index){
                    layer.msg(data.id)
                    $.post("{{ route('admin.article.destroy') }}",{_method:'delete',ids:[data.id]},function (result) {
                        if (result.code==0){
                            obj.del(); //删除对应行（tr）的DOM结构
                        }
                        layer.close(index);
                        layer.msg(result.msg)
                    });
                });
            } else if(layEvent === 'edit'){
                layer.msg(data.id)
                //location.href = '/admin/article/'+data.id+'/edit';
            } else if(layEvent === 'login'){
                if(data.is_login == 1){
                    is_login = 0;
                }else{
                    is_login = 1;
                }
                var data = {'is_login':is_login,'node':data.node};
                $.ajax({
                    type: 'POST',
                    url: '{:url("saveNode")}',
                    data: data,
                    success: function (ret) {
                        if (ret.code == 200) {
                            layer.msg(ret.msg);
                            dataTable.reload();
                        }
                        return false;
                    }
                });
            }else if(layEvent === 'auth'){
                if(data.is_auth == 1){
                    is_auth = 0;
                }else{
                    is_auth = 1;
                }
                var data = {'is_auth':is_auth,'node':data.node};
                $.ajax({
                    type: 'POST',
                    url: '{:url("saveNode")}',
                    data: data,
                    success: function (ret) {
                        if (ret.code == 200) {
                            layer.msg(ret.msg);
                            dataTable.reload();
                        }
                        return false;
                    }
                });
            }
        });

        //搜索
        $("#searchBtn").click(function () {
            var catId = $("#category_id").val()
            var title = $("#title").val();
            var node = $("#node").val();
            dataTable.reload({
                where:{category_id:catId,title:title, node:node},
                page:{curr:1}
            })
        })

        $("body").on("blur","input.title-input",function(){
            var data = {list: [{name: this.name, value: this.value, node: this.getAttribute('data-node')}]};
            $.ajax({
                type: 'POST',
                url: '{:url("save")}',
                data: data,
                success: function (ret) {
                    if (ret.code == 200) {
                        layer.msg(ret.msg);
                    }
                    return false;
                }
            });
        });



    })
</script>
{/block}
